<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>应用案例_图片切割</title>
<script type="text/javascript" src="../lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery.imagecropper.js"></script>
<script type="text/javascript">
	$(function(){
		$("#cropbox").Cropper({//调用切割方法
			aspectRatio:1,//设置所选区域的长度比例
			onChange:showPreview,//设置长度变化后触发的事件
			onSelect:showPreview //设置选择区域后触发的事件
		});
	})
	//自定义提交切割数据时的检测函数
	function checkCoords(){
		if(parseInt($('#w').val())))) return true;
		alert('请选择一个区域，点击确定按钮');
		return false;
	}

	//根据预览图片的大小调用图片的预览函数
	function showPreview(coords){
		if(parseInt(coords.w)>0){
			imgPrev(coords,"#img100",100);
			imgPrev(coords,"#img80",80);
			imgPrev(coords,"#img60",60);
		}
		//获取所选择区域的坐标与宽高
		$("#x").val(coords.x);
		$("#y").val(coords.y);
		$("#w").val(coords.w);
		$("#h").val(coords.h);
	}

	//自定义所选择区域的图片预览函数
	function imgPrev(coords,obj,w){
		var rx = w/coords.w;
		var ry = w/coords.h;

		$(obj).css({
			width:Math.round(rx*504)+'px',
			height:Math.round(ry*378)+'px',
			marginLeft:'-'+Math.round(rx*coords.x)+'px',
			marginTop:'-'+Math.round(ry*coords.y)+'px',
		});
		
	}
	
</script>
</head>
<body>
	<div id="outer">
		<div class="jcExample">
			<div class="article">
				<h2>图片切割</h2>
				<img src="../../Images/006.gif" id="cropbox"/>
				<form action="CropImage.jsp"  method="post" onsubmit="return checkCoords();">
					<input type="hidden" id="x" name="x"/>
					<input type="hidden" id="y" name="y"/>
					<input type="hidden" id="w" name="w"/>
					<input type="hidden" id="h" name="h"/>
					<input type="hidden" id="p" name="p" value="../../Images/007.gif"/>
					<input type="hidden" id="l" name="l" value="0.9"/>
					<input type="submit" value="确定" class="btn"/>
				</form>
				
			</div>
			<div class="clsPre">
				<div class="img100">
					<img src="../../Images/002.gif" class="imgPre" id="img100"/>
				</div>
				<div class="clsAlt">100*100像素</div>
				<div class="img80">
					<img src="../../Images/002.gif" class="imgPre" id="img80"/>
				</div>
				<div class="clsAlt">80*80像素</div>
				<div class="img60">
					<img src="../../Images/002.gif" class="imgPre" id="img60"/>
				</div>
				<div class="clsAlt">60*60像素</div>
			</div>
		</div>
	</div>

</body>
</html>